<template>
	<view class="detail">
		<template v-if="isLoad === true">
			<author :author="author" />
			<detail :detail="detail" />
			<reply :replies="replies" />
			<template v-if="isLogin">
				<view class="fixed">
					<view class="collect" @click="topicOpt">
						<uni-icons :type="isCollect ? 'heart-filled' : 'heart'" size="26"></uni-icons>
					</view>
					<view class="comment" @click="openReply">评 论</view>
				</view>
				<reply-form :topicId="topicId" :replies="replies" />
			</template>
		</template>
	</view>
</template>

<script>
	import author from './author.vue'
	import detail from './detail.vue'
	import reply from './reply.vue'
	import replyForm from './reply-form.vue'
	export default {
		components: {
			author,
			detail,
			reply,
			'reply-form': replyForm
		},
		data (){
			return {
				isLogin: false,
				isLoad: false,
				isCollect: false,
				author: {},
				detail: {},
				replies: [],
				topicId: ''
			}
		},
		onLoad (params){
			this.topicId = params.id
			this.isLogin = this.$isLogin()
			this.getDetail(params.id)
		},
		created (){
			this.$EventBus.$on('add_reply', (res) => {
				this.replies.push(res)
			})
		},
		beforeDestroy (){
			this.$EventBus.$off('add_reply')
		},
		methods: {
			// 主题详情
			async getDetail (id){
				uni.showLoading({
					title: '加载中...'
				})
				let result = await this.$request.get('/topic/' + id + '?accesstoken=' + this.$store.state.access_token);
				let { data } = result;
				if(result.success){
					this.isLoad = true;
					this.detail = data;
					this.author = {...data['author'], author_id: data['author_id']};
					this.replies = data['replies'];
					this.isCollect = data['is_collect']
				}else{
					return 'false'
				}
				uni.hideLoading()
			},
			// 收藏/取消收藏
			topicOpt (){
				this.isCollect ? this.cancelCollectTopic() : this.collectTopic()
			},
			// 收藏
			collectTopic (){
				this.$request.post('/topic_collect/collect', {
					accesstoken: this.$store.state.access_token,
					topic_id: this.topicId
				}).then(result => {
					if(result.success){
						this.isCollect = true
					}
					uni.showToast({
						title: result.success ? '收藏成功' : '收藏失败'
					})
				})
			},
			// 取消收藏
			cancelCollectTopic (){
				this.$request.post('/topic_collect/de_collect', {
					accesstoken: this.$store.state.access_token,
					topic_id: this.topicId
				}).then(result => {
					if(result.success){
						this.isCollect = false
					}
					uni.showToast({
						title: result.success ? '取消成功' : '取消失败'
					})
				})
			},
			// 弹出评论框
			openReply (){
				this.$EventBus.$emit('openPop', {
					id: '',
					name: ''
				})
			}
		}
	}
</script>
<style lang="scss">
	.fixed{
		position: fixed;
		bottom: 20px;
		right: 15px;
		z-index: 9;
		.collect,
		.comment{
			width: 42px;
			height: 42px;
			line-height: 42px;
			text-align: center;
			background: $baseColor;
			border-radius: 100%;
			color: #fff;
			font-size: 12px;
			border: 1px solid #eee;
		}
		.collect{
			padding-top: 1px;
			margin-bottom: 8px;
			background-color: #fff;
		}
		uni-icons,
		.uni-icons{
			margin-right: 0px;
			color: $baseColor!important;
		}
	}
</style>

